<template>
  <view class="container">
    <!-- 提示 -->
    <view class="tip">
      <view>
        <text style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">温馨提示</text>
        <text style="margin-left: 30rpx; font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #999999">注销后，您的下述权益将注销</text>
      </view>
      <view style="margin-top: 32rpx; font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333">
        <view style="margin: 15rpx 0">1.您的账号信息</view>
        <view style="margin: 15rpx 0">2.您的账号权益，尚未使用的优惠券等。</view>
      </view>
    </view>
    <!-- 注意 -->
    <view class="session">
      <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">您需要满足下述条件才可进行注销操作</view>
      <view style="margin-top: 32rpx; font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333">
        <view style="margin: 15rpx 0">1.账号近15日之内不存在交易行为</view>
        <view style="margin: 15rpx 0">2.该账号没有未完成状态的订单，也无未完结的课程</view>
        <view style="margin: 15rpx 0">3.账号近15日之内不存在交易行为</view>
        <view style="margin: 15rpx 0">4.该账号没有未完成状态的订单，也无未完结的课程</view>
      </view>
    </view>
    <!-- 单选框 -->
    <view style="box-sizing: border-box; margin: 0 30rpx; font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
      <label class="radio">
        <radio value="checked" :checked="checked" color="#3553E8" @click="checked = !checked" style="transform: scale(0.7)" />
        <text>阅读并同意</text>
        <text style="color: #3553e8" @click.stop="gozxxy">《注销协议》</text>
      </label>
    </view>
    <!-- 确认注销按钮 -->
    <view class="okbtn" @click="zhuxiao">确认注销</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  methods: {
    // 注销
    zhuxiao() {
      if (this.checked) {
        uni.$http.post('/user/logoff');
      } else {
        return uni.showToast({
          title: '请您阅读并同意注销协议',
          icon: 'none'
        });
      }
    },
    // 注销协议
    gozxxy() {
      uni.navigateTo({
        url: '/pages/zxxy/zxxy'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .tip {
    box-sizing: border-box;
    width: 690rpx;
    height: 232rpx;
    margin: 30rpx;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .session {
    box-sizing: border-box;
    width: 690rpx;
    height: 352rpx;
    margin: 30rpx;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .okbtn {
    box-sizing: border-box;
    position: absolute;
    bottom: 60rpx;
    left: 30rpx;
    width: 690rpx;
    height: 90rpx;
    background-color: #3553e8;
    color: #fff;
    border-radius: 100rpx;
    text-align: center;
    line-height: 90rpx;
  }
}
</style>
